<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-select.min.css">
    <script src="/js/libs/jquery-2.1.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/bootstrap/bootstrap-select.min.js"></script>
    <script src="/js/jq.js"></script>
    <script src="/js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/table.js"></script>
    <script src="/js/dict.js"></script>
    <script src="/js/libs/jquery.ztree.all-3.5.min.js"></script>
    <script src="/js/my/ztree-menu.js"></script>
    <script src="/js/my/permission.js"></script>
    <script src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
</head>
<body>
<div class="layui-row layui-col-space10" style="background-color: #F2F2F2;">
    <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
        <div class="layui-card">
            <div class="layui-card-body">
                <div>
                    <div class="widget-body no-padding">
                        <table id="dt-table" class="table table-striped table-bordered table-hover" style="width:100%">
                            <thead>
                            <tr>
                            </tr>
                            <tr>
                                <th>ID</th>
                                <th>任务名称</th>
                                <th>执行者</th>
                                <th>任务描述</th>
                                <th>截止日期</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" style="height: 100%;">
        <div class="layui-card">
            <div class="layui-card-header">选中项</div>
            <div class="layui-card-body">
                <ul id="selectedItems"></ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/libs/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/jq.js"></script>
<script type="text/javascript" src="/js/plugin/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/js/plugin/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/js/my/permission.js"></script>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
    });

    const isAll = getUrlParam("isAll");
    const isMultiSelect = eval(getUrlParam("isMultiSelect"));
    const projectId = getUrlParam("projectId");
    var echo = getUrlParam("echo");
    var example;
    function init() {
        example =
            $('#dt-table').DataTable({
                "searching": false,
                "processing": false,
                "serverSide": true,
                "language": {
                    "url": "/js/plugin/datatables/Chinese.lang"
                },
                "ajax": {
                    "url": "/task/list",
                    "type": "get",
                    "data": function (d) {
                        d.projectId = projectId;
                    }
                },
                "dom": "<'dt-toolbar'r>t<'dt-toolbar-footer'<'col-sm-10 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-10' p v>>",
                "columns": [
                    {"data": "id", "defaultContent": "", "visible": false},
                    {"data": "name", "defaultContent": ""},
                    {"data": "participantName", "defaultContent": ""},
                    {"data": "description", "defaultContent": ""},
                    {
                        "data": "deadline",
                        "width":"60px",
                        "defaultContent": "",
                        "render": function (data, type, row) {
                            var diffDays = DateDiff(data, new Date().Format());
                            if (diffDays > 1 || row['status'] == 7 || row['status'] == 9) {
                                return "<span class='layui-badge layui-bg-green'>" + data + "</span>";
                            } else if (diffDays === 1) {
                                return "<span class='layui-badge layui-bg-orange'>" + data + "</span>";
                            } else {
                                return "<span class='layui-badge layui-bg-red'>" + data + "</span>";
                            }
                        }
                    },
                    {
                        "data": "status",
                        "defaultContent": "",
                        render: function (data, type, row) {
                            return getDict('task_status')[data];
                        }
                    },

                ],
                "initComplete": function (settings, json) {
                    if (echo) {
                        echo = JSON.parse(decodeURIComponent(echo));
                        if (echo.length !== 0) {
                            $.each(echo, function (i, _data) {
                                let item = '<li><div style="border: 1px; overflow: hidden;">' +
                                    '<a href="javascript:void(0)" onclick="parent._tabAdd(this)" data-url="pages/tms/task/conjunctionTask.html?id=' + _data['id'] + '" lay-id="888_' + _data['id'] + '" style="width: 80%; display: inline-block; white-space: nowrap; overflow: hidden;" name="selectedItem" ';

                                $.each(_data, function (k, v) {
                                    // item += 'data-'+k+'="' + JSON.stringify(v) + '" ';
                                    item += 'data-' + k + '="' + v + '" ';
                                });

                                item += '>' + _data['name'] + '&nbsp;</a>' +
                                    '<a style="width: 25px; float: right;" class="layui-btn layui-btn-xs" onclick="deleteItem(this)">' +
                                    '<i class="layui-icon layui-icon-close"></i></a></div></li>';
                                $('#selectedItems').append(item);
                            });
                        }
                    }
                },
                "rowCallback": function (row, data) {
                    $(row).on('click', function () {
                        if ($(this).hasClass('success')) {
                            $(this).removeClass('success');
                        } else {
                            if (!isMultiSelect) {
                                example.$('tr.success').removeClass('success');
                            }
                            $(this).addClass('success');
                        }
                        addItem(data, 'name', isMultiSelect);
                    })
                },
                "order": [[0, "asc"]]
            });
    }


    $("#searchBt").click(function () {
        example.ajax.reload();
    });

    init();
</script>
